<template>
	<view>
		<!-- <u-navbar title="内部报备后台" :background="background" title-color="white" back-icon-color="white"></u-navbar> -->

		<view class="bg-white u-margin-20 u-padding-left-20 u-padding-right-20 br10">
			<u-form :model="form" ref="uForm">
				<u-form-item labelWidth="150" label="姓名">
					<u-input v-model="form.name" placeholder="请输入姓名" />
				</u-form-item>
				<u-form-item labelWidth="150" label="手机号">
					<u-input v-model="form.phone" placeholder="请输入手机号" />
				</u-form-item>
				<u-form-item labelWidth="150" label="身份证">
					<u-input v-model="form.id_code" placeholder="请输入身份证" />
				</u-form-item>
				<u-form-item labelWidth="150" label="单位名称">
					<u-input v-model="form.unit_name" placeholder="请输入单位名称" />
				</u-form-item>
				<u-form-item labelWidth="150" label="产品平台">
					<u-input v-model="form.product_name" placeholder="请输入产品平台" />
				</u-form-item>
				<u-form-item labelWidth="150" label="放款金额">
					<u-input v-model="form.money" placeholder="请输入放款金额" />
				</u-form-item>
				<u-form-item labelWidth="150" label="放款截图">
					<uploader @after-read="afterRead" :file-list="fileList" :max-upload="1" :deletable="true" useSlot
						@delete="handleDelete">
						<view class="column-center">
							<view class="upload-area row-center">
								<image src="/static/images/uploader_icon.png"></image>
							</view>
						</view>
					</uploader>
				</u-form-item>
			</u-form>


		</view>

		<u-button type="primary" class="mt20" :custom-style="{backgroundColor: '#4990fa',margin:'0 20rpx'}"
			@click="uploadData">确定报备</u-button>
	</view>
</template>

<script>
	import {
		uploadFile
	} from "@/utils/tools";
	import {
		addReportReload
	} from "@/api/app";
	export default {
		data() {
			return {
				fileList: [],
				form: {
					name: '',
					phone: '',
					id_code: '',
					unit_name: '',
					product_name: '',
					money: '',
					image: '',
				},
				background: {
					backgroundColor: '#66a6ff',
				}
			};
		},
		onLoad() {
			uni.$once('h5ShareSetFinished',function(w,o){
				o.shareTitle = '报备后台';
				o.shareDesc = '报备后台';
				w.share(o)
			})
		},
		methods: {
			afterRead(e) {
				const file = e;
				uni.showLoading({
					title: '正在上传中...',
					mask: true
				});
				file.forEach(item => {
					uploadFile(item.path).then(res => {
						uni.hideLoading();
						this.fileList.push(res);
						this.qrCode = res.url;
					});
				})
				
			},
			handleDelete(index) {
				this.fileList.splice(index, 1)
			},
			uploadData() {
				var _this = this;
				var d = {
					name: '姓名',
					phone: '手机号',
					id_code: '身份证',
					unit_name: '单位名称',
					product_name: '产品名称',
					money: '放款金额',
					image: '放款截图',
				}
				if(!this.$u.test.isEmpty(this.fileList[0]['base_url'])){
					this.form['image'] = this.fileList[0]['base_url']
				}
				for (var k in d) {
					if (this.$u.test.isEmpty(this.form[k])) {
						return this.$u.toast(d[k]);
					}
					if (k == 'phone' && !this.$u.test.mobile(this.form[k])) {
						return this.$u.toast('请检测手机号');
					}

					if (k == 'id_code' && !this.$u.test.idCard(this.form[k])) {
						return this.$u.toast('请检查身份证号码');
					}
				}
				
				addReportReload(this.form).then(res => {
					_this.$u.toast(res.msg);
					if(res.code == 1){
						setTimeout(()=>{
							uni.reLaunch({
								url:'/pages/index/index'
							})
						},500)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: url(../../static/images/bg.png) repeat;

		.br10 {
			border-radius: 10rpx;
		}

		.uploader-container {
			.upload-area {
				width: 160rpx;
				height: 160rpx;
				border: 4rpx dashed #E5E5E5;
				border-radius: 10rpx;

				image {
					width: 54rpx;
					height: 44rpx;
				}
			}
		}
	}
</style>